<template>
  <div class="settings">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>系统设置</span>
        </div>
      </template>

      <el-form 
        ref="formRef"
        :model="form"
        label-width="140px"
        class="settings-form"
      >
        <el-divider content-position="left">浏览器设置</el-divider>
        
        <el-form-item label="浏览器池大小">
          <el-input-number 
            v-model="form.browser.poolSize"
            :min="1"
            :max="20"
            controls-position="right"
          />
          <div class="form-item-tip">同时运行的浏览器实例数量</div>
        </el-form-item>

        <el-form-item label="无头模式">
          <el-switch v-model="form.browser.headless" />
          <div class="form-item-tip">是否在后台运行浏览器（无界面模式）</div>
        </el-form-item>

        <el-divider content-position="left">截图设置</el-divider>

        <el-form-item label="默认超时时间">
          <el-input-number 
            v-model="form.screenshot.timeout"
            :min="1000"
            :max="60000"
            :step="1000"
            controls-position="right"
          />
          <div class="form-item-tip">页面加载超时时间（毫秒）</div>
        </el-form-item>

        <el-form-item label="默认视口尺寸">
          <el-col :span="11">
            <el-input-number 
              v-model="form.screenshot.width"
              :min="1"
              :max="10000"
              controls-position="right"
              placeholder="宽度"
            />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">x</span>
          </el-col>
          <el-col :span="11">
            <el-input-number 
              v-model="form.screenshot.height"
              :min="1"
              :max="10000"
              controls-position="right"
              placeholder="高度"
            />
          </el-col>
          <div class="form-item-tip">默认浏览器视口大小</div>
        </el-form-item>

        <el-divider content-position="left">存储设置</el-divider>

        <el-form-item label="存储路径">
          <el-input v-model="form.storage.basePath" />
          <div class="form-item-tip">截图文件存储的根目录</div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSave">保存设置</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const formRef = ref()

const form = reactive({
  browser: {
    poolSize: 5,
    headless: true
  },
  screenshot: {
    timeout: 30000,
    width: 1920,
    height: 1080
  },
  storage: {
    basePath: '/data/web2image/files'
  }
})

// 加载设置
const loadSettings = async () => {
  try {
    // TODO: 实现后端获取设置API
    const response = await fetch('/api/v1/settings')
    const data = await response.json()
    Object.assign(form, data)
  } catch (error) {
    ElMessage.error('加载设置失败')
  }
}

// 保存设置
const handleSave = async () => {
  try {
    // TODO: 实现后端保存设置API
    await fetch('/api/v1/settings', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(form)
    })
    ElMessage.success('保存成功')
  } catch (error) {
    ElMessage.error('保存失败')
  }
}

// 重置表单
const handleReset = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
}

onMounted(() => {
  loadSettings()
})
</script>

<style scoped>
.settings {
  max-width: 800px;
  margin: 0 auto;
}

.settings-form {
  margin-top: 20px;
}

.form-item-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

:deep(.el-divider__text) {
  font-size: 16px;
  font-weight: bold;
  color: #606266;
}
</style> 